import { defineConfig } from 'unocss'
import { presetDaisy } from 'unocss-preset-daisy'
import { presetUno, transformerVariantGroup, transformerDirectives, presetAttributify, presetIcons } from 'unocss'
// import { transformerCompileClass } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
  transformers: [
    // 指令转换器：解析 @apply、@screen、@theme() 等指令（或叫做注解）
    // 注意：@apply指令支持变体组
    // 注意：@apply支持tailwindcss的类名，但是不支持daisyui的类名。所以不要把daisyui的类名写到@apply中。
    // 建议把tailwindcss的类名写到@apply中，把daisyui的类名和自定义的类名写到单独的class属性中。
    transformerDirectives(),
    // 变体组转换器：在class属性值中提取类名的公共前缀，并将其作为变体组。提高样式代码可读性。
    // 注意：变体组支持自定义类名，支持daisyui的类名。变体组支持在@apply中使用。
    /*例如：
      <div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>将转变为
      <div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>
     */
    transformerVariantGroup(),
    // 编译类转换器：将class属性值的一组类编译成单个类。
    // 注意：:uno: 只能写在class属性值的开头，不能写在其他地方（不能写在@apply中）。
    // 注意：:uno: 支持变体组、支持与@apply配合使用，支持tailwindcss的类名，但是不支持daisyui的类名和自定义类名。
    // 不建议使用此转换器，因为它不支持自定义类名，可能导致bug。
    /*使用：在类字符串的开头添加 :uno: 以将其标记为要编译。
      <div class=":uno: text-center sm:text-left"/> 将编译为：<div class="uno-qlmcrp"/>
     */
    // transformerCompileClass(),
  ],
  presets: [
    // A. 官方预设：
    // UnoCSS 的默认预设。此预设尝试提供流行的工具优先框架的通用超集，包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等。
    presetUno(),
    // 图标预设：纯 CSS 图标库，可以直接通过class类名在 HTML 中使用。更多信息参考：https://unocss.nodejs.cn/presets/icons
    presetIcons({
      /* options */
      // collections: {
      //   mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
      // }
    }),
    // 属性化预设：按照class类名前缀分组，幷将类名前缀作为属性，提高样式代码可读性。
    // 注意：此预设不支持自定义类名以及daisyui的类名。
    presetAttributify({ /* preset options */ }),

    // B. 社区预设：
    // UI预设：基于daisyUI组件库，该预设接受与daisyUI相同的配置（除了logs和prefix）。
    presetDaisy({
      // themes：如果设为true，则会包含所有主题；如果设为false，则只包含'light'和'dark'；如果设为数组，则只包含数组中的主题，第一个元素为默认主题。默认为false。
      themes: ['light', 'dark', 'retro', 'dim', 'halloween'],
      // darkTheme：设置其他主题。默认为'dark'。
      darkTheme: 'dim',
      // styled：如果设置为false，则组件无样式，可以在一个基本的骨架上设计你自己的颜色和视觉样式。默认为true。
      // styled: false,
    }),
  ],
})